import { JSDOM } from 'jsdom';
namespace webapiday1 {

  const dom: JSDOM = new JSDOM(`
      <!DOCTYPE html>
      <html>
        <body>
          <div id="countdown"></div>
          <div id="stopUpdates"></div>
          <div id="username"></div>
        </body>
      </html>
      `);

  const document: Document = dom.window.document;

  // setInterval和clearInterval案例
  // 动态倒计时
  // type CountdownElement = HTMLElement & { innerText: string };
  // type CountdownCallback = () => void;

  // const endTime: number = new Date('2024-08-15T23:59:59').getTime();

  // function countdown(): void {
  //     const now: number = new Date().getTime();
  //     const distance: number = endTime - now;

  //     const countdownElement: CountdownElement | null = document.getElementById('countdown') as CountdownElement | null;

  //     if (countdownElement) {
  //         countdownElement.innerText = `活动结束剩余时间: ${Math.max(0, Math.floor(distance / 1000))}秒`;
  //         console.log(countdownElement.innerText);

  //         if (distance < 0) {
  //             clearInterval(intervalId);
  //             countdownElement.innerText = '活动已结束';
  //             console.log(countdownElement.innerText);
  //         }
  //     }
  // }

  // const intervalId: NodeJS.Timeout = setInterval(countdown as CountdownCallback, 1000);


  // 实时更新股票价格
  // type FetchElement = HTMLElement;
  // type FetchCallback = () => void;

  // function fetchStockPrice(): void {
  //     console.log('股票价格已更新');
  // }
  // const stockUpdateInterval: NodeJS.Timeout = setInterval(fetchStockPrice as FetchCallback, 600);
  // const stopUpdatesEL: FetchElement | null = document.getElementById('stopUpdates') as FetchElement | null
  // (stopUpdatesEL as FetchElement).addEventListener('click', () => {
  //     clearInterval(stockUpdateInterval);
  //     console.log('股票价格更新已停止');
  // })




  // setTimeout和clearTimeout
  // 登录表单的防抖（Debouncing）
  // type OnUserCallback = () => void
  // let timeoutId: NodeJS.Timeout;
  // const userNameEl: HTMLElement | null = document.getElementById('username') as HTMLElement | null

  // function onUsernameInput(): void {
  //     if (timeoutId) {
  //         clearTimeout(timeoutId);
  //     }
  //     timeoutId = setTimeout(() => {
  //         console.log('验证用户名...')
  //     }, 300)
  // }
  // (userNameEl as HTMLElement).addEventListener('input', onUsernameInput as OnUserCallback)


  // 延迟加载大图片或资源


  function loadIImage(): void {
    const img: HTMLImageElement = new Image();
    img.src = 'large-image.jpg';
    img.onload = () => {
      console.log('图片已加载完成');
    }

  }
  document.addEventListener('load', () => {
    const timeoutId: NodeJS.Timeout = setTimeout(loadIImage, 1000);

  });
  // 显示提示信息后自动消失
  type HintCallback = () => void

  function showHint(massage: string, duration: number): HintCallback {
    const hintElement: HTMLElement = document.getElementById('hint') as HTMLElement

    hintElement.innerText = massage
    hintElement.style.display = 'block'

    const timeoutId: NodeJS.Timeout = setTimeout(() => {
      hintElement.style.display = 'none'
    }, duration)
    return () => { clearTimeout(timeoutId) }
  }
  const clearHint: HintCallback = showHint('操作成功', 5000)





}
